<template>
  <div>
    <heard :topshow="topshow" :cont="cont" />
    <!-- 头部 -->
    <div>
      <img
        src="https://www.pdd-fapiao.com/images/news/pddweb-xinwen@2x.png"
        alt=""
        class="productimg"
      />
    </div>

    <!-- 最新资讯 -->
    <div>
      <p class="module-title">
        <span class="module-title-text right">最新资讯</span>
      </p>

      <div class="bigbox curros">
        <div class="list-item" v-for="item in 2" :key="item">
          <img
            src="../static/338e5d85-4801-4e63-ab86-0fc65a6dada6.png"
            alt=""
            class="topimg"
          />
          <div class="item-text" style="margin-top: 12px">
            <div>票芊芊：中国数字人民币推行项目的领跑者</div>
            <img
              src="https://www.pdd-fapiao.com/images/icons/icon_news_link.png"
              alt=""
              class="icons"
            />
          </div>
          <p class="item-desc">
            当前上海正面临复杂严峻的疫情防控大考验。疫情面前，不能袖手旁观，得共担使命。面对本轮疫情的“来势汹汹”，广大民营企业积极行动起来，主动承担社会责任，通过不同形式主动为上海抗击疫情贡献自身力量。
          </p>
          <p class="time">2022-04-19 19:17:56</p>
        </div>
      </div>
    </div>
<!-- 往期质询 -->
<div>
  <p class="module-title">
    <span class="module-title-text1 left">
      往期资讯
    </span>
  </p>
  <div class="wangibobx curros" v-for="item in 4" :key="item">
<div class="flixoo">
  <img src="../static/daf3fb09-f1e9-4f4e-967d-1ddac27d56c0.png" alt="" class="imgicon">
  <div>
    <div style="display: flex;align-items: center;">
      <span class="title-text">票芊芊：深化政企合作，助力地方企业成功开启数字化财税之门</span>
      <span class="title-link"><img src="https://www.pdd-fapiao.com/images/icons/icon_news_link.png" alt="" class="icons"></span>
    </div>
    <p class="item-desc">近日，南通市海安市招商局与重庆继元清科技有限公司正式签订了战略合作。双方将围绕优化南通市地方税收营商环境，带动地方经济，促进招商引资发展等方面展开了深度合作。今后，双方将共同努力推动南通市地方企业的财税领域的数字化转型，探索、开发专项的数字化财税服务体系，助力地方招商工作提质增效的协同发展的新型合作模式。</p>
    <p class="item-time">2022-03-29 16:08:45</p>
  </div>
</div>
  </div>
</div>
    <footers />
  </div>
</template>

<script>
import heard from "@/components/heard";
import footers from "@/components/footer";
export default {
  components: {
    heard,
    footers,
  },
  data() {
    return {
      topshow: false,
      cont: 3,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle);
  },
  methods: {
    scrollHandle(e) {
      let top = e.srcElement.scrollingElement.scrollTop; // 获取页面滚动高度
      if (top >= 500) {
        this.topshow = true;
      } else {
        this.topshow = false;
      }
    },
  },
};
</script>

<style scoped>
.curros{
   cursor: pointer;
}
.flixoo{
  padding: 20px;
    box-sizing: border-box;
    background: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    border-bottom: 1px solid #f1f1f1;
   margin-left: 30px;
}
.imgicon{
width: 323px;
    height: 209px;
    object-fit: cover;
    margin-right: 30px;

}
.wangibobx{
  width: 1200px;
  margin: 0 auto;
}
.module-title-text1 {
    position: relative;
}
.module-title-text1.left::before {
    content: "";
    width: 70px;
    height: 15px;
    background-color: #5486FE;
    position: absolute;
    left: -20px;
    bottom: 5px;
    opacity: .3;
}
.module-title-text1.left::after {
    content: "";
    width: 70px;
    height: 15px;
    background-color: #5486FE;
    position: absolute;
    left: -35px;
    bottom: -2px;
    opacity: .7;
}
.time {
  font-size: 18px;
  line-height: 25px;
  color: #666;
}
.bigbox {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.list-item {
  width: 45%;
  padding: 10px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 1px 1px 4px 0px rgb(202 202 202 / 50%);
}
.item-desc {
  width: 520px;
  font-size: 18px;
  line-height: 25px;
  color: #666;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.item-text {
  display: flex;
  justify-content: space-between;
  width: 520px;
}
.icons {
  width: 25px;
}
.topimg {
  width: 520px;
  height: 306px;
}
.productimg {
  width: 100%;
}
.module-title {
  font-size: 44px;
  color: #333;
  line-height: 1.5;
  text-align: center;
}
.module-title-text {
  position: relative;
}
.module-title-text.right::before {
  content: "";
  width: 70px;
  height: 15px;
  background-color: #5486fe;
  position: absolute;
  right: -20px;
  bottom: 5px;
  opacity: 0.3;
}
.module-title-text.right::after {
  content: "";
  width: 70px;
  height: 15px;
  background-color: #5486fe;
  position: absolute;
  right: -35px;
  bottom: -2px;
  opacity: 0.7;
}
.item-time{
  margin: 30px 0 0;
    font-size: 18px;
    line-height: 25px;
    color: #666;

}
.item-desc{
  font-size: 18px;
    line-height: 25px;
    color: #666;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.title-link{
      width: 24px;
    height: 24px;
    margin-left: 20px;
    cursor: pointer;
}
.title-text{
      flex: 1;
    font-size: 21px;
    line-height: 30px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>